<template>
  <div>
    <a-form-item
      v-for="k in form.getFieldValue('keys')"
      :key="k"
      :required="false"
    >
      <a-input
        :type="type"
        :autoSize="autoSize"
        v-model="myValue[k]"
        :placeholder="`第`+(k+1)+`行`"
        style="width: 60%; margin-right: 8px"
        :disabled="disabled"
      />
      <a-icon
        v-if="form.getFieldValue('keys').length > 1 && !disabled"
        class="dynamic-delete-button"
        type="minus-circle-o"
        :disabled="form.getFieldValue('keys').length === 1"
        @click="() => remove(k)"
      />
    </a-form-item>
    <a-form-item>
      <a-button :disabled="id>9 || disabled" type="dashed" style="width: 60%" @click="add">
        <a-icon type="plus" /> 加一行
      </a-button>
    </a-form-item>
  </div>
</template>

<script>
import { inArray } from '@/libs/utils'
export default {
  name: 'DynamicInput',
  props: {
    value: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'input'
    },
    autoSize: {
      type: Object,
      default: function() {
        return { 
          minRows: 2, 
          maxRows: 6 
        }
      }
    },
    /**
     * 是否禁用
     */
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      id: 1,
      myValue: []
    }
  },
  created() {
    let initialValue = [0];
    for (let index of this.myValue.keys()) {
      initialValue.push(index)
    }
    if (this.value) {
      let values = this.value.split('\n#').filter(function(el) {
				return el != 0;
			});
      for (let index = 0; index < values.length; index++) {
        if (values[index]) {
          if (!inArray(index,initialValue)) {
            initialValue.push(index)
          }
          this.myValue.push(values[index]);
          this.id++;
        }
      }
    }
    this.form.getFieldDecorator('keys', { initialValue: initialValue, preserve: true });
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'dynamic_form_item' });
    
  },
  watch: {
    myValue(newValue) {
      newValue = newValue.filter((el, index) => {
        // 过滤掉连续的空行，只保留一个空行
        if (el === '' && newValue[index + 1] === '') {
          return false;
        }
        return true;
      }).join('\n#');
      this.$emit('input', newValue);
    },
    value(newValue) {
      this.myValue = newValue.split('\n#')
    }
  },
  methods: {
    remove(k) {
      const { form } = this;
      // 可以使用数据绑定来获取
      const keys = form.getFieldValue('keys');
      // 我们至少需要一行数据
      if (keys.length === 1) {
        return;
      }
      // 可以使用数据绑定来设置
      form.setFieldsValue({
        keys: keys.filter(key => key !== k),
      });
      this.id--;

      // 移除指定k的数据
      this.myValue[k] = ''      
      this.$emit('input', this.myValue.join('\n#'))
    },

    add() {
      const { form } = this;
      // 可以使用数据绑定来获取
      const keys = form.getFieldValue('keys');
      const nextKeys = keys.concat(this.id++);
      // 可以使用数据绑定来设置
      // 很重要！通知表单以检测更改
      form.setFieldsValue({
        keys: nextKeys,
      });
    },
  },
};
</script>
<style>
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  bottom: 0px;
  font-size: 20px;
  color: #999;
  transition: all 0.3s;
}
.dynamic-delete-button:hover {
  color: #777;
}
.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>
